import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// 引入公共组件SvgIcon

// 全局注册为'svg-icon'
// 整个项目的.vue文件中, 使用 <svg-icon></svg-icon>组件去使用svg图标
Vue.component('svg-icon', SvgIcon)

/*
  需求: 把整个项目中会用到的svg图标在这里汇总引入
*/

// 方式一:
// 存在问题: 1) 手动import, 如果太多则过于繁琐 2) 项目开发过程中国有新增新的svg图标, 还需要额外导入
// import eye from './svg/eye.svg'
// import form from './svg/form.svg'
// import link from './svg/link.svg'
// ....

// 方式二:
// 自动导入
// require.context(directory,useSubdirectories,regExp)
// require.context是一个函数, 可以实现文件的自动批量导入, 避免了手动import
// directory: 要查找的文件夹
// useSubdirectories: 是否查找子文件夹
// regExp: 正则匹配, 这里则是匹配所有以.svg结尾的文件

const req = require.context('./svg', false, /\.svg$/)
// 获取到所有要查找的.svg后缀文件的路径, 并放入数组
// console.log(req.keys())
const requireAll = requireContext => requireContext.keys().map(requireContext)
// 根据上面文件路径数组, 映射生成文件数组
requireAll(req)
// console.log(requireAll(req))

// 项目中已经集成了 svg-sprites => webpack插件 svg-prites-loader => 会自动将所有import进来的svg图标拼接到一个大的容器里面

